<template>
	<!-- 页面内容--银行卡页面 -->
	<view style="width: 100vw; min-height: 100vh;background-color: #1F2022; color: #fff;">
		<formheadVue :headname="$t('bank.bankinfo')" :pagenum='2'></formheadVue>
		<view class="P-head">
			<view class="P-1">
				<image src="../../static/steptwo.png" mode=""></image>
			</view>
			<view class="P-2" style="margin-top: 20px;">
				<view class="P-2-title flexrowstart">
					<image src="../../static/bankicon.png" mode=""></image>
					<text class="gradient-text">{{$t('bank.bankinfo')}}</text>
				</view>
			</view>
			<view class="P-6">
				<view class="content-1 flexcenter">
					<image src="../../static/worning.png" mode=""></image>
					<p>
						{{$t('bank.tips')}}
					</p>
				</view>
			</view>
			<view class="P-2">
				<!-- 持卡人姓名 -->
				<view style="margin-bottom: 10px;margin-top: 10px;">
					<view style="font-size: 18px;font-weight: 500;">{{$t('bank.username')}}
						<span style="font-size: 12px;">{{$t('bank.usernametips')}}</span>
					</view>
				</view>
				<view class="P-5" :style="getBorderStyle(usecardUserName)">
					<uni-easyinput style="height: 100%;" type="text" v-model="usecardUserName" :styles="from.styles"
						@blur="endTiming('usecardUserName')" @focus="startTiming('usecardUserName')"
						:placeholderStyle="from.placeholderStyle" :placeholder="$t('pleaseinput')"></uni-easyinput>
				</view>
			</view>
			<view class="P-2">
				<!-- 持卡人的身份证-->
				<view style="margin-bottom: 10px;margin-top: 10px;">
					<text style="font-size: 18px;font-weight: 500">{{$t('bank.useridcardnum')}}</text>
				</view>
				<view :style="getBorderStyle(usecardUserIdkcardNum)" class="P-5">
					<uni-easyinput style="height: 100%;" type="number" maxlength="13" v-model="usecardUserIdkcardNum"
						:styles="from.styles" @blur="endTiming('usecardUserIdkcardNum')"
						@focus="startTiming('usecardUserIdkcardNum')" :placeholderStyle="from.placeholderStyle"
						:placeholder="$t('pleaseinput')"></uni-easyinput>
				</view>
			</view>
			<view class="P-2">
				<!-- 持卡人手机号 -->
				<view style="margin-bottom: 10px;margin-top: 10px;">
					<text style="font-size: 18px;font-weight: 500">{{$t('bank.phone')}}</text>
				</view>
				<view class="P-5" :style="getBorderStyle(usecardUserPhone)">
					<input style="height: 100%;font-size: 16px;width: 100%;" type="text"
						@blur="endTiming('usecardUserPhone')" @focus="startTiming('usecardUserPhone')"
						v-model="usecardUserPhone" :placeholder="$t('pleaseinput')" class="input" maxlength="10"
						inputmode="numeric" />
				</view>
			</view>
			<view class="P-2">
				<view style="margin-bottom: 10px;margin-top: 10px;">
					<text style="font-size: 18px;font-weight: 500">{{$t('bank.bankname')}}</text>
				</view>
				<view class="P-5" @click="bankCodeclickFun()" style="padding: 0rpx;">
					<uni-data-select :emptyTips="$t('emptyTips')" style="height: 100%;width: 100%;padding: 6rpx 20rpx;
					box-sizing: border-box;" :placeholder="$t('pleaseselect')" v-model="bankCode" :style="getBorderStyle(bankCode)"
						@change="bankCodeChange" :localdata="dropdowns.bank"></uni-data-select>
				</view>
			</view>
			<view class="P-2">
				<view style="margin-bottom: 10px;margin-top: 10px;">
					<text style="font-size: 18px;font-weight: 500">{{$t('bank.banktype')}}</text>
				</view>
				<view class="P-5" @click="bankAccountTypeCodeclickFun()" style="padding: 0rpx;">
					<uni-data-select :emptyTips="$t('emptyTips')" style="height: 100%;width: 100%;padding: 6rpx 20rpx;
					box-sizing: border-box;" :placeholder="$t('pleaseselect')" v-model="bankAccountTypeCode"
						@change="bankAccountTypeCodeChange" :style="getBorderStyle(bankAccountTypeCode)"
						:localdata="dropdowns.bankAccountType"></uni-data-select>
				</view>
			</view>
			<view class="P-2">
				<view style="margin-bottom: 10px;margin-top: 10px;">
					<text style="font-size: 18px;font-weight: 500">{{$t('bank.banktnum')}}</text>
				</view>
				<view class="P-5" :style="getBorderStyle(yinhangka)">
					<uni-easyinput type="number" v-model="yinhangka" style="height: 100%;" :styles="from.styles"
						maxlength="16" @blur="endTiming('yinhangka')" @focus="startTiming('yinhangka')"
						:placeholderStyle="from.placeholderStyle" :placeholder="$t('pleaseinput')"></uni-easyinput>
				</view>
			</view>
			<view class="P-2">
				<view style="margin-bottom: 10px;margin-top: 10px;">
					<text style="font-size: 18px;font-weight: 500">{{$t('bank.confirmbanktnum')}}</text>
				</view>
				<view class="P-5" :style="getBorderStyle(yinhangka1)">
					<uni-easyinput style="height: 100%;" type="number" v-model="yinhangka1" :styles="from.styles"
						maxlength="16" @blur="endTiming('yinhangka1')" @focus="startTiming('yinhangka1')"
						:placeholderStyle="from.placeholderStyle" :placeholder="$t('pleaseinput')"></uni-easyinput>
				</view>
			</view>
			<view style="margin-top: 30rpx;">
				<view @click="fn1()" class="P-2 flexcenter">
					<p> {{$t('continue')}}</p>
				</view>
			</view>
		</view>
		<!-- 		<uni-popup ref="worningPopup" type="center" :animation="false" :mask-click="false" :is-mask-click="false">
			<view class="popupView">
				{{$t('bank.tips')}}
				<view class="closepopup" @click="closeworning">
					OK
				</view>
			</view>
		</uni-popup> -->
	</view>
</template>

<script>
	import formheadVue from '../../components/formhead.vue';
	import api from '@/pages/utils/api.js'
	import setDot from '@/pages/utils/setdot.js';
	import setfengkongDot from '@/pages/utils/fengkong.js';
	import getDroupMeunFun from '@/pages/utils/getDroupMeun.js'
	export default {
		data() {
			return {
				handleClick: false, //默认没点击,
				bankCode: '',
				bankAccountTypeCode: '',
				yinhangka: '', //银行卡
				yinhangka1: '', //确认银行卡
				usecardUserName: '',
				usecardUserPhone: '',
				usecardUserIdkcardNum: '',
				dropdowns: {
					bank: [], //银行名称
					bankAccountType: [], //银行类型
				},
				from: {
					placeholderStyle: "color:#555555;font-size:15px;",
					styles: {
						color: '#555555',
						borderColor: '#2979FF',
					}
				},
				startTimes: {}, // 记录每个输入框的开始时间
				fillTimes: { // 存储填写时长
					usecardUserName: 0,
					usecardUserPhone: 0,
					usecardUserIdkcardNum: 0,
					yinhangka: 0,
					yinhangka1: 0,
					bankCode: 0,
					bankAccountTypeCode: 0,
				},

				secondSubmitBankValue: false,
			}
		},
		components: {
			formheadVue
		},
		onLoad(options) {
			console.log('options', options);
			this.secondSubmitBankValue = options.secondSubmitBank || false;
		},
		watch: {
			usecardUserPhone: function(newVal) {
				let value = newVal.toString(); // 确保是字符串
				value = value.replace(/[^0-9]/g, '');
				if (value.length > 0 && value.charAt(0) !== '0') {
					value = '0' + value;
				}
				if (value.length > 10) {
					value = value.slice(0, 10);
				}
				if (value !== this.usecardUserPhone) {
					this.$nextTick(() => {
						this.usecardUserPhone = value;
					})
				}
			},
			usecardUserName(newVal) {
				// 允许输入泰文和空格，但不能全是空格
				let value = newVal.replace(/[^\u0E00-\u0E7F\s]/g, ''); // 过滤非泰文和非空格字符
				if (!value.trim()) { // 如果去掉空格后为空，重置为 ''
					value = '';
				}
				this.$nextTick(() => {
					this.usecardUserName = value;
				})
			},
		},
		computed: {
			getBorderStyle() {
				return (value) => {
					return this.checkempty(value) ? {
						border: '6rpx solid #FDF57C',
						borderRadius: '40rpx',
						width: '100%'
					} : {};
				};
			}
		},
		created() {
			console.log('created');

		},
		onShow() {
			this.startTiming('page')
			//重新计算下拉框的填写时长
			uni.removeStorageSync('bankAccountTypeCodeChangebegin')
			uni.removeStorageSync('bankCodeChangebegin')
			this.loadDropdownData();
		},
		methods: {
			async loadDropdownData() {
				try {
					const types = ["bank", "bankAccountType"];
					const promises = types.map(type => getDroupMeunFun(type));

					const results = await Promise.all(promises);
					types.forEach((type, index) => {
						this.dropdowns[type] = results[index]?.map(item => ({
							value: item.ggbb,
							text: item.cjfu
						})) || [];
					});
					if (this.secondSubmitBankValue) {
						this.getformData()
					}

				} catch (error) {
					console.error("获取下拉数据失败", error);
				}
			},
			getformData() {
				let params = {
					vjeu: '1'
				}
				api.getBankInfo(params).then(res => {
					console.log('表格数据回显', res);
					const data = res[0]
					if (data) {
						this.$nextTick(() => {
							this.bankCode = data.pebj || ''
							this.bankAccountTypeCode = data.lbdr || ''
							this.yinhangka = data.yxsl || ''
							this.yinhangka1 = data.yxsl || ''
							this.usecardUserName = data.shit || ''
							this.usecardUserPhone = data.skby || ''
							this.usecardUserIdkcardNum = data.fjqe || ''
						})
					}
				})
			},
			checkempty(name) {
				if (name == '' && this.handleClick) {
					return true
				} else {
					return false
				}
			},
			closeworning() {
				this.$refs.worningPopup.close()
			},
			fn1() {
				console.log('是否是更新？', this.secondSubmitBankValue);
				this.handleClick = true
				console.log('bankCode', this.bankCode);
				console.log('bankAccountTypeCode', this.bankAccountTypeCode);
				console.log('yinhangka', this.yinhangka);
				console.log('yinhangka1', this.yinhangka1);
				console.log('usecardUserName', this.usecardUserName);
				console.log('usecardUserPhone', this.usecardUserPhone);
				console.log('usecardUserIdkcardNum', this.usecardUserIdkcardNum);
				const requiredFields = [
					'bankCode',
					'bankAccountTypeCode',
					'yinhangka',
					'yinhangka1',
					'usecardUserName',
					'usecardUserPhone',
					'usecardUserIdkcardNum',
				];
				const cansubmit = requiredFields.every(field => this[field] !== '');
				const consistentbankNum = this.yinhangka === this.yinhangka1 ? true : false
				if (cansubmit && Number(this.usecardUserIdkcardNum.length != 13)) {
					uni.showToast({
						title: this.$t('bank.erroridnum'),
						icon: 'none',
						duration: 2000
					})
					return
				}
				if (!consistentbankNum) {
					uni.showToast({
						title: this.$t('bank.bankerrormsg'),
						icon: 'none',
						duration: 2000
					})
					return
				}
				if (this.usecardUserPhone.length != 10) {
					uni.showToast({
						icon: 'none',
						title: this.$t('contactArrangement.phonetips')
					})
					return
				}
				console.log('可以提交了吗', cansubmit, "银行卡确认一致吗？", consistentbankNum);

				let bankName = ''
				if (this.bankCode) {
					bankName = this.dropdowns.bank.find(item => item.value === this.bankCode);
				}
				console.log('backName', bankName.text);
				if (cansubmit) {
					let params = {
						pebj: this.bankCode, //bankCode
						paos: bankName.text, //bankName
						lbdr: this.bankAccountTypeCode, //bankAccountType
						yxsl: this.yinhangka, //bankAccountNumber
						shit: this.usecardUserName, //registeredname
						skby: this.usecardUserPhone, //bankaccountid
						fjqe: this.usecardUserIdkcardNum, //cwCode
					}
					if (this.secondSubmitBankValue) {
						params.jcno = uni.getStorageSync('currntOrderId')
						params.jwlp = '1'
					}
					console.log('params', params);
					api.uploadBankInfo(
							params
						).then(data => {
							console.log('存储成功');
							setDot('CLICK_BANK_INF_SUBMIT')
							this.endTiming('page')
							//页面停留总时长
							setfengkongDot('BankAccountPageStopDurationALL', this.fillTimes.page)
							setfengkongDot('BankAccountCompleteDuration', this.fillTimes.yinhangka)
							setfengkongDot('AccountConfirmationCompleteDuration', this.fillTimes.yinhangka1)

							setfengkongDot('NameBankCompleteDuration', this.fillTimes.bankCode)
							setfengkongDot('AccountTypeCompleteDuration', this.fillTimes.bankAccountTypeCode)

							//填写时长
							setfengkongDot('BankAccountPageCompleteDurationALL',
								Number(this.fillTimes.usecardUserName || 0) +
								Number(this.fillTimes.usecardUserPhone || 0) +
								Number(this.fillTimes.usecardUserIdkcardNum || 0) +
								Number(this.fillTimes.yinhangka || 0) +
								Number(this.fillTimes.yinhangka1 || 0) +
								Number(this.fillTimes.bankCode || 0) +
								Number(this.fillTimes.bankAccountTypeCode || 0)
							)
							console.log('this.fillTimes', this.fillTimes);
							uni.setStorageSync('yinhangka', this.yinhangka)
							if (this.secondSubmitBankValue) {
								uni.switchTab({
									url: '/pages/demo2/demo2'
								});
							} else {
								uni.navigateTo({
									url: '/pages/demo8/demo8',
									animationType: 'slide-in-right',
									animationDuration: 200
								});
							}

							//重新计算下拉框的填写时长
							uni.removeStorageSync('bankAccountTypeCodeChangebegin')
							uni.removeStorageSync('bankCodeChangebegin')
						})
						.catch(err => {
							console.log('error啊啊啊啊啊', err);
							// if (err.ggbb !== -1001 && err.ggbb !== -1000) {
							// 	this.$refs.worningPopup.open('center')
							// }
						});
				}
			},
			// 开始计时
			startTiming(field) {
				this.startTimes[field] = Date.now();
			},
			// 结束计时并计算时长
			endTiming(field) {
				if (this.startTimes[field]) {
					const endTime = Date.now();
					this.fillTimes[field] = endTime - this.startTimes[field];
					this.startTimes[field] = null; // 重置
				}
			},
			bankCodeChange(e) {
				if (uni.getStorageSync('bankCodeChangebegin')) {
					this.endTiming('bankCode')
				}
			},
			bankCodeclickFun() {
				if (!uni.getStorageSync('bankCodeChangebegin')) {
					this.startTiming('bankCode')
					uni.setStorageSync('bankCodeChangebegin', true)
				}
			},
			bankAccountTypeCodeChange(e) {
				if (uni.getStorageSync('bankAccountTypeCodeChangebegin')) {
					this.endTiming('bankAccountTypeCode')
				}
			},
			bankAccountTypeCodeclickFun() {
				console.log('点击了');
				if (!uni.getStorageSync('bankAccountTypeCodeChangebegin')) {
					uni.setStorageSync('bankAccountTypeCodeChangebegin', true)
					this.startTiming('bankAccountTypeCode')
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-input-input {
		font-size: 16px !important;
	}

	::v-deep .uni-input-placeholder {
		color: #999 !important;
		font-size: 16px !important;
	}

	.P-5 {
		width: 100%;
		background-image: url('/static/inputborder.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		padding: 6rpx 20rpx;
		box-sizing: border-box;
		height: 100rpx;
	}

	.flexrowspacebetween {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.flexrowstart {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.flexcenter {
		display: flex;
		justify-content: center;
		align-items: center;
		align-content: center;
	}

	.popupView {
		width: 76vw;
		height: fit-content;
		background-color: #706392;
		border-radius: 20rpx;
		padding: 30rpx 40rpx;

		.closepopup {
			color: #C39EED;
			width: 100%;
			text-align: center;
			border-top: 2rpx solid #000;
			text-decoration: underline;
			padding-top: 30rpx;
			margin-top: 30rpx;
			font-size: 36rpx;
		}
	}

	.P-head {
		width: 100%;
		background-color: #1F2022;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		padding: 30rpx;
		box-sizing: border-box;
		margin-top: -110rpx;


		image {
			width: 100rpx;
			height: 100rpx;
		}
	}


	.P-1 {
		margin-top: 20px;

		image {
			width: 100%;
			height: 100rpx;
		}
	}

	.P-2 {
		width: 100%;
		margin: 20rpx 0rpx;

		.P-2-title {
			height: 100rpx;
			background-image: url('../../static/tipsbg.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			padding: 0rpx 20rpx;

			image {
				width: 60rpx;
				height: 50rpx;
				margin-right: 40rpx;
			}
		}

		.gradient-text {
			background: linear-gradient(to bottom, rgba(204, 154, 243, 1), #F9E4B7);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			font-weight: bold;
			font-size: 32rpx;
			/* 根据需要调节 */
		}

		p {
			width: 86%;
			height: 90rpx;
			background-color: #FFF584;
			text-align: center;
			color: #000;
			line-height: 90rpx;
			border-radius: 20rpx;
			font-size: 40rpx;
			box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.2);
			transition: all 0.2s;
			// animation: pulsebtn 1.2s ease-in-out infinite;

		}

		p:active {
			transform: scale(0.96);
			box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.2);
		}

		@keyframes pulsebtn {
			0% {
				transform: scale(1);
			}

			50% {
				transform: scale(1.08);
			}

			100% {
				transform: scale(1);
			}
		}

	}

	.P-6 {
		background-color: #393A3D;
		padding: 20rpx 30rpx;
		border-radius: 20rpx;
		font-size: 28rpx;
		margin: 40rpx 0rpx 30rpx 0;

		.content-1 {
			box-sizing: border-box;
			color: #FF9E6F;

			image {
				width: 43rpx;
				height: 43rpx;
			}

			p {
				margin-left: 20rpx;
				width: 88%;
			}

		}
	}
</style>